<!-- 横向进度条柱状图 -->
<template>
    <div class="echarts-box"
         id="progressBar"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "progressBar",
    data () {
        return {
            width: 0,
            rightGrid: 0,
            rightPadding: 0
        }
    },
    mounted () {
        this.initCharts();
    },
    methods: {
        initCharts () {
            let myChart = echarts.init(document.getElementById("progressBar"));
            let data = [
                { text: "数据7", value: 9 },
                { text: "数据6", value: 8 },
                { text: "数据5", value: 6 },
                { text: "数据4", value: 7 },
                { text: "数据3", value: 8 },
                { text: "数据2", value: 4 },
                { text: "数据1", value: 6 },
            ]
            let yData = data.map(it => {
                return it.text
            })
            let option = {
                grid: {
                    left: "6%",
                    right: "15%",
                    bottom: "0%",
                    top: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "value",
                    show: false,
                },
                yAxis: {
                    type: "category",
                    axisTick: { show: false },
                    axisLine: { show: false },
                    data: yData
                },
                series: [
                    {
                        name: "2011",
                        type: "bar",
                        barWidth: 10,
                        showBackground: true,
                        backgroundStyle: {
                            color: '#ddd',
                            borderRadius: 5,
                        },
                        data: data,
                        itemStyle: {
                            normal: {
                                color: "#1890FF",
                                borderRadius: 5,
                                label: {
                                    show: true,
                                    formatter: "{c}",
                                    textStyle: { //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            },
                        },
                    },
                ],
            };

            let opt = this.adaptValue(myChart, option)

            myChart.setOption(opt);

            let that = this
            /** 图表随屏幕变化而变化 */
            window.addEventListener("resize", function () {
                setTimeout(() => {
                    let opt = that.adaptValue(myChart, option)
                    myChart.setOption(opt);
                    myChart.resize();
                }, 100);
            });

        },
        /** 百分数转小数 */
        toPoint (percent) {
            var str = percent.replace("%", "");
            str = str / 100;
            return str;
        },
        /** 右侧数值位置自适应 */
        adaptValue (charts, option) {
            var width = charts.getWidth()       // 获取图表宽度
            var rightGrid = this.toPoint(option.grid.right) //获取图表右侧grid
            var rightPadding = width * rightGrid    //计算右侧gird宽度数值
            option.series[0].itemStyle.normal.label.position = [width - rightPadding - 50, 0]   //修改右侧数值偏移量
            return option
        },
    }
}
</script>

<style>
</style>